<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">

        <div>{{msg}}</div>
        <div class="test"></div>
    </div>

    <!-- <script src="./assets/vue.js">
    </script> -->
    <script>
        class Vue {
            constructor(options) {
                this.$el = document.querySelector(options.el)
                this.$options = options
                this.$watchEvent[key] = [1, 1, 1]

                console.log(options.data);

                this.proxyData()

                // 劫持数据变更时触发
                for (const key in this.$options.data) {

                    let value = this.$options.data[key]


                    Object.defineProperty(this.$options.data, key, {
                        configurable: false,
                        enumerable: true,

                        // 设置数据时触发
                        set(val) {
                            console.log('set value');
                            value = val
                            document.querySelector('.test').innerHTML = value
                        },

                        // 获取数据时触发
                        get() {
                            // console.log('get value');
                            return value
                        }
                    })

                }

            }

            proxyData() {
                // 代理数据，从options.data代理到app.
                for (const key in this.$options.data) {

                    Object.defineProperty(this, key, {
                        configurable: false,
                        enumerable: true,
                        set(val) {
                            this.$options.data[key] = val
                        },
                        get() {
                            return this.$options.data[key]
                        }
                    })

                }
            }


        }
    </script>
    <script>
        let options = {

            el: '#app',
            data: {
                msg: 'this is a msg',
                username: 'zhangsan'
            },
            methods: {
                changeEvent() {
                    this.msg = 'hshdfhsfhsdf'
                }

            }
        }

        const app = new Vue(options)

        console.log(app);
    </script>


</body>

</html>